<template>
	<view>
	    <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />
	    <uni-list>
	        <view v-if="menuIndex === 0">
	            <uni-list-item v-for="(item, index) in custBook" :key="index" :rightText="item.gaStat ? '已购买' : '未购买'" :thumb="item.customer?.ciAvat" thumb-size="lg">
	                <template v-slot:body style="width: 250px">
	                    <view style="font-size: 16px; font-weight: 600">{{ (item.customer?.ciName || "") + (item.customer?.ciAlia ? "(" + item.customer?.ciAlia + ")" : "") + item.customer?.ciPhon }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ "预约项目：" + (item.item?.giName || "") }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ item.shareCust?.ciPhon ? "分享客户：" + item.shareCust?.ciAlia + item.shareCust?.ciPhon : "" }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ item.shareStaff?.orName ? "所属员工：" + item.shareStaff?.orName : "" }}</view>
	                </template>
	            </uni-list-item>
	        </view>
	
	        <view v-if="menuIndex === 1">
	            <uni-list-item v-for="(item, index) in custBook" :key="index" :rightText="item.gaStat ? '已购买' : '未购买'" :thumb="item.customer?.ciAvat" thumb-size="lg">
	                <template v-slot:body style="width: 250px">
	                    <view style="font-size: 16px; font-weight: 600">{{ (item.customer?.ciName || "") + (item.customer?.ciAlia ? "(" + item.customer?.ciAlia + ")" : "") + item.customer?.ciPhon }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ "预约项目：" + (item.item?.giName || "") }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ item.shareCust?.ciPhon ? "分享客户：" + item.shareCust?.ciAlia + item.shareCust?.ciPhon : "" }}</view>
	                    <view style="font-size: 12px; color: dimgrey">{{ item.shareStaff?.orName ? "所属员工：" + item.shareStaff?.orName : "" }}</view>
	                </template>
	            </uni-list-item>
	        </view>
	    </uni-list>
	</view>
</template>

<script>
	import { getCustomerAppointment } from "../../utils/api";
	import { mapGetters } from "vuex";
	
	export default {
		data() {
			return {
			    menuItems: ["未购买", "已购买"],
			    menuIndex: 0,
			    custBook: [],
			};
		},
		onLoad() {
		    this.getCustomerAppointment({ gpUuid: this.activity.gpUuid, gaStat: false });
		},
		computed: {
		    ...mapGetters({
		        activity: "activityInfo/activity",
		    }),
		},
		methods: {
		    onClickItem(e) {
		        if (this.menuIndex !== e.currentIndex) {
		            this.menuIndex = e.currentIndex;
		            if (e.currentIndex == 0) {
		                this.getCustomerAppointment({ gpUuid: this.activity.gpUuid, gaStat: false });
		            }
		            if (e.currentIndex == 1) {
		                this.getCustomerAppointment({ gpUuid: this.activity.gpUuid, gaStat: true });
		            }
		        }
		    },
		    async getCustomerAppointment({ gpUuid, gaStat }) {
		        let res = await getCustomerAppointment({ gpUuid, gaStat });
		        this.custBook = res?.filter((item) => item.gaStat === gaStat) || [];
		    },
		},
	}
</script>

<style>
</style>